<template>

  <div class="wrapp">
    <div class="head">
      <div class="title">用户新增</div>
    </div>
    <div class="banner">
      <div class="item">
        <span class="itemTitle">手机号</span>
        <Input style="width:200px;" v-model="phone" />
      </div>
      <div class="item">
        <span class="itemTitle">姓名</span>
        <Input style="width:200px;" v-model="name" />
      </div>
      <div class="item">
        <span class="itemTitle">用户钱包地址</span>
        <Input style="width:600px;" v-model="wallet" />
      </div>
      <div class="item">
        <span class="itemTitle">UT钱包地址</span>
        <Input style="width:600px;" v-model="UTwallet" />
      </div>
    </div>
    <div class="foot">
      <Button type="primary" @click="sub">提交</Button>
    </div>
  </div>
</template>

<script>
import apis from "../../util/apis.js";

export default {
  name: "AddUser",
  data() {
    return {
      phone: "",
      name: "",
      wallet: "",
      UTwallet: ""
    };
  },
  methods: {
    sub() {
      if (!this.phone) {
        this.$Message.warning("请输入手机号码");
        return;
      } else {
        if (this.phone.length != 11) {
          this.$Message.warning("请输入正确的手机号");
          return;
        } else if (this.phone[0] != "1") {
          this.$Message.warning("请输入正确的手机号");
          return;
        }
      }

      if (this.wallet) {
        if (this.wallet[0] != "0" || this.wallet[1] != "x") {
          this.$Message.warning("主钱包地址以0x开头，亲");
          return;
        } else if (this.wallet.length != 42) {
          console.log(this.wallet.length);
          this.$Message.warning("主钱包地址要42位呢，猪头");
          return;
        }
      }

      if (this.UTwallet) {
        if (this.UTwallet[0] != "U") {
          this.$Message.warning("UT钱包地址以’U'开头哦，能不能用点心填");
          return;
        } else if (this.UTwallet.length != 34) {
          this.$Message.warning("UT钱包地址要34位，哥");
          return;
        }
      }

      this.$Modal.confirm({
        title: "确认提交信息",
        content:
          "<div>手机号码：" +
          this.phone +
          "</div>" +
          "<div>姓名:" +
          this.name +
          "</div>" +
          "<div>用户钱包地址:" +
          this.wallet +
          "</div>" +
          "<div>UT钱包地址:" +
          this.UTwallet +
          "</div>",
        onOk: () => {
          this.submitAction();
        },
        onCancel: () => {
          this.$Message.info("已取消提交");
        }
      });
    },
    submitAction() {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }

      let payload = {
        cashWallet: this.wallet,
        mobile: this.phone,
        name: this.name,
        utCashWallet: this.UTwallet
      };

      this.$axios({
        method: "post",
        url: apis.addUserApi,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        },
        data: payload 
      })
        .then(res => {
          console.log(res);
          if (res.status == "201") {
            let data = res.data;
            this.$Message.success("创建用户成功");
            this.$router.push({
              name: "UserInfo"
            });
          } else {
            this.$Message.error(res.data.message);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    }
  },
  created() {}
};
</script>
<style scoped>
.wrapp {
  padding: 0 20px;
}

.head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}

.banner {
  margin-top: 20px;
}

.title {
  color: #666;
  font-size: 24px;
}

.item {
  margin-top: 15px;
  display: flex;
}

.itemTitle {
  width: 150px;
  text-align: left;
  margin-right: 20px;
  font-size: 20px;
}

.foot {
  margin-top: 20px;
}
</style>